<template>
	<view class="page">
		<view class="member-center">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				会员开通
			</view>
		</view>
		<view class="qy">
			我的权益：百霸智育商品市场零售价{{discount}}折
		</view>
		<view class="title">
			会员类型
		</view>
		<view class="bg" :style="{
			  backgroundImage: `url('${kaitong_image}')`,
			
			}">
			<view class="tab flex ">
				<view class="tab_list" v-for="(i,v) in statuss" :key="v" :class="current==v?'hover':''"
					@click="tabClick(i,v)">
					<view class="tab_name">
						{{i.label}}
					</view>
					<view class="tab_line" v-if="current==v"></view>
				</view>
			</view>
			<view class="bg_box">
				<view class="bg_box_title">
					成本价：¥{{cost_price}}
				</view>
				<view class="bg_box_title">
					建议零售价：¥ {{retail_price}}
				</view>
			</view>
		</view>
		<view class="paddingLeft-40 marginTop-40">
			<view class="marginBottom-30">
				<view class="fontSize-28 color-333">
					实收零售价（元）
				</view>
				<view class="marginTop-10">
					<up-input placeholder="请输入实收零售价" v-model="retail_price2" border="none" color="#51D580" type="number"
						@blur="blur"></up-input>
				</view>
			</view>
			<view class="marginBottom-30">
				<view class="fontSize-28 color-333">
					会员手机号
				</view>
				<view class="marginTop-10 border_bottom">
					  <input
					      type="text"
					      placeholder="请输入手机号码"
						  placeholder-style="font-size:20rpx"
					      v-model="phoneNumber"
					      @input="changeInput"
					    />
				</view>
			</view>
			<view class="relative">
				<view class="bg_cont">
					本次实收：¥{{retail_price2}}
				</view>
				<view class="bg_cont">
					本次扣款：¥{{cost_price}}
				</view>
				<view class="bg_cont">
					本次收益：¥{{income}}
				</view>
			</view>
		</view>
		<view class="btn" @click="sure">
			确认开通
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const getFieldListApi = inject('getFieldList')
	const discount = ref(0)
	const kaitong_image = ref('')
	const statuss = ref([])
	const current = ref(0)
	const cost_price = ref(0)
	const retail_price = ref(0)
	const income = ref(0)
	const retail_price2 = ref(0)
	const openmemberApi = inject('openmember')
	const member_type = ref(0)
	const member_tel = ref('')
	onLoad(() => {
		getFieldList()
	});
	const back = () => {
		uni.navigateBack()
	}
	const getFieldList = () => {
		getFieldListApi().then(res => {
			console.log(res)
			discount.value = res.discount
			kaitong_image.value = res.kaitong_image
			statuss.value = res.statuss
			income.value = res.statuss[0].income
			cost_price.value = res.statuss[0].cost_price
			retail_price.value = res.statuss[0].retail_price
			retail_price2.value = retail_price.value
			member_type.value = res.statuss[0].value
		})
	}
	const tabClick = (i, v) => {
		current.value = v
		member_type.value = i.value
		retail_price2.value = i.retail_price
		retail_price.value = i.retail_price
		income.value = i.income
		cost_price.value = i.cost_price
	}
	const blur = () => {
		income.value = (retail_price2.value * 100 - cost_price.value * 100) / 100
	}
	const isValidPhoneNumber = (phoneNumber) => {
		return /^1\d{10}$/.test(phoneNumber);
	}
	const phoneNumber = ref('')
	
	const changeInput = (event) => {
		console.log(event, 134)
	   let value = event.target.value.replace(/\s+/g, ''); // 移除所有空格
	      value = value.slice(0, 11); // 确保只输入11位数字

		if (value.length <= 3) {
			phoneNumber.value = value;
		} else if (value.length <= 7) {
			phoneNumber.value = value.slice(0, 3) + ' ' + value.slice(3);
		} else {
			phoneNumber.value = value.slice(0, 3) + ' ' + value.slice(3, 7) + ' ' + value.slice(7);
		}
		console.log(phoneNumber.value,145)
	}

	const sure = () => {
		if (!isValidPhoneNumber(member_tel.value)) {
			console.log(666)
			uni.showToast({
				title: '请输入正确格式手机号',
				icon: 'none'
			})
			return
		}
		if (member_tel.value == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		if (retail_price2.value == '' || retail_price2.value == 0) {
			uni.showToast({
				title: '请输入零售价',
				icon: 'none'
			})
			return
		}
		openmemberApi({
			member_type: member_type.value,
			member_tel: member_tel.value,
			amount: retail_price2.value,
			cost_price: cost_price.value,
			retail_price: retail_price.value
		}).then(res => {
			console.log(res)
			if (res.status == 200) {
				uni.showToast({
					title: '开通成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.member-center {
		width: 100%;
		height: 216rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.qy {
		width: 690rpx;
		height: 66rpx;
		background: #EBEBEB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 30rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #666666;
		line-height: 66rpx;
	}

	.title {
		padding: 40rpx 30rpx 30rpx 30rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.bg {
		width: 686rpx;
		height: 328rpx;
		background-size: 100% 100%;
		margin: 0 auto;

		.tab {
			padding-top: 20rpx;

			.tab_list {
				width: 25%;

				.tab_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #55C87B;
					text-align: center;
				}

				.tab_line {
					width: 44rpx;
					height: 8rpx;
					background: #007628;
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					margin: 10rpx auto 0;
				}

			}

			.hover {
				font-weight: bold;
				color: #007628;

				.tab_name {
					color: #007628;
				}
			}

		}

		.bg_box {
			margin: 100rpx 0 0 64rpx;

			.bg_box_title {
				font-weight: 800;
				font-size: 30rpx;
				color: #007628;
				margin-bottom: 14rpx;
			}

		}
	}

	.relative {
		// right: 80rpx;
		top: 40rpx;
	}

	.bg_cont {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding-top: 20rpx;
		text-align: right;
		padding-right: 80rpx;
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		color: #fff;
		text-align: center;
		line-height: 104rpx;
		font-size: 32rpx;
		margin-top: 10rpx;
		position: fixed;
		bottom: 42rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.border_bottom {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ebebeb;
		input{
			font-weight: bold;
			font-size: 40rpx;
			color: #51D580;
			padding: 20rpx 0;
		}
	}
</style>